<style lang="less">
    .img-upload {
        position: relative;
        cursor: pointer;
        display: block;
        width: 100%;
        height: 100%;
        .img-warpper {
            height: 100%;
            width: 100%;
            position: absolute;
            top: 0;
            left: 0;
            background-color: #fafafa;
            .item {
                position: relative;
                width: 100%;
                height: 100%;
                border: 1px dashed #d9d9d9;
            }
        }
        .no-img {
            white-space: nowrap;
            border-radius: 4px;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            position: absolute;
            .no-img-ctr {
                text-align: center;
                color: #999;
            }
            .icon {
                font-size: 32px;
            }
            .no-img-span {
                margin-top: 8px;
                color: #666;
            }
        }

        .img {
            width: 100%;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            position: absolute;
        }

        .other {
            font-size: 32px;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            position: absolute;
        }
    }
</style>
<template>
    <a-upload class="img-upload" :remove="handleRemove" :before-upload="beforeUpload" :customRequest="handleUpload" :multiple="true" :show-upload-list="false">
        <!-- :accept="accept" -->

        <slot v-if="!useDefaultSlot"></slot>
        <div class="img-warpper" v-if="useDefaultSlot">
            <div class="item">
                <div v-if="!src" class="no-img">
                    <div class="no-img-ctr">
                        <a-icon class="icon" :type="loading ? 'loading' : 'plus'" />
                        <div class="no-img-span">上传文件</div>
                    </div>
                </div>
                <img v-if="src&&srcIsImage" class="img" :src="src" width="150px" height="150px" />
                <a-icon v-if="src&&!srcIsImage" :type="iconType" class="other" />
            </div>
        </div>
    </a-upload>
    <!-- </span> -->
</template>
<script>
    import { uploadFile, BizTypeEnum, testFileType } from '../../../modules/common/service/zsFiles.js'
    export default {
        name: 'ImgUpload',
        props: {
            src: {
                type: String
            },
            /** audio/*,video/*,image/* */
            accept: {
                type: String,
                default: () => 'image/*'
            },
            /** 是否私有文件 */
            isPrivate: Boolean,
            bizType: Number
        },
        created() {
            // this.imageUrl = this.src;
        },
        computed: {
            // vmImageUrl(){
            //     return this.imageUrl||this.src;
            // },
            useDefaultSlot() {
                return (this.$slots && this.$slots.default) ? false : true
            },
            srcIsImage() {
                return testFileType(this.src).isImage
            },
            iconType() {
                const typeRes = testFileType(this.src);
                if (typeRes.isTxt) return 'file-text';
                if (typeRes.isExcel) return 'file-excel';
                if (typeRes.isPDF) return 'file-pdf';
                if (typeRes.isPPT) return 'file-ppt';
                if (typeRes.isWord) return 'file-word';
                if (typeRes.isVideo) return 'play-square';
                return 'file';
            }
        },
        data() {
            return {
                fileList: [],
                imageUrl: null,
                loading: false
            };
        },
        methods: {
            handleRemove(file) {
                const index = this.fileList.indexOf(file);
                const newFileList = this.fileList.slice();
                newFileList.splice(index, 1);
                this.fileList = newFileList;
            },
            beforeUpload(file) {
                this.fileList = [...this.fileList, file];

                /**
                 * 图片大小效验
                 * image/jpg,image/jpeg,image/png
                 */
                // let isLt2M = file.size / 1024 / 1024 < 2;
                // if (this.accept.indexOf('image') > -1 && !isLt2M) {
                //     this.$message.error('请上传上传小于 2MB 的图片！');
                // } else {
                //     isLt2M = true;
                // }
                return true;
            },
            handleUpload(params) {
                console.log(params)
                let fileobj = params.file;
                let param = {};
                param.data = fileobj;
                param.name = fileobj.name;
                this.loading = true;
                this.$emit('beforeUpload', params);
                if (this.bizType == 1)//logo
                {
                    param.bizType = BizTypeEnum.IMAGE_SYS_HOSPITAL_LOGO;
                }
                else if (this.bizType == 2)//医院科室logo
                {
                    param.bizType = BizTypeEnum.IMAGE_SYS_DEPARTMENT_LOGO;
                } else {
                    // 默认图片
                    param.bizType = null;
                }
                param.isPrivate = this.isPrivate;
                uploadFile(param).then((result) => {
                    // this.imageUrl = result.path;
                    this.loading = false;
                    const val = result;
                    console.log(val);
                    val.size = fileobj.size;
                    val.name = fileobj.name;
                    this.$emit('ok', val);
                    this.$listeners.change && this.$listeners.change();
                }).catch(error => {
                    console.log('上传失败！', error);
                    this.loading = false;
                    this.$emit('cancel', error);
                });
            }
        }
    };
</script>